<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  layout: 'tabbar',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <view class="bg-white overflow-hidden" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <!-- 导航栏 -->
    <wd-navbar class="custom-navbar" title="助学堂" left-text="返回" right-text="设置" left-arrow>
      <wd-navbar-capsule @back="handleBack" @back-home="handleBackHome" />
    </wd-navbar>

    <!-- 搜索框 -->
    <view class="search-container px-4 py-2">
      <wd-search
        v-model="searchText"
        placeholder="搜索你感兴趣的内容"
        cancel-txt="搜索"
        @search="handleSearch"
      />
    </view>

    <!-- 轮播图 -->
    <view class="swiper-container px-4">
      <wd-swiper
        :list="swiperList"
        autoplay
        v-model:current="current"
        :indicator="{ type: 'dots-bar' }"
        @click="handleSwiperClick"
        @change="handleSwiperChange"
        class="rounded-lg overflow-hidden"
      />
    </view>

    <!-- 热门分类 -->
    <view class="category-container px-4 mt-4">
      <view class="section-header mb-3">
        <view class="section-title">热门分类</view>
        <view class="category-tabs">
          <text 
            v-for="(tab, index) in categoryTabs" 
            :key="index"
            :class="['tab-item', { active: currentCategoryTab === index }]"
            @click="handleTabChange(index)"
          >
            {{ tab }}
          </text>
        </view>
      </view>
      <view class="categories">
        <view 
          v-for="(category, index) in currentCategories" 
          :key="index" 
          class="category-item" 
          @click="handleCategoryClick(category)"
          :style="{ animationDelay: `${index * 0.05}s` }"
        >
          <view class="category-icon-wrapper">
            <text class="iconfont" :class="category.icon"></text>
          </view>
          <text class="category-name">{{ category.name }}</text>
          <text class="category-count">{{ category.courseCount }}门课程</text>
        </view>
      </view>
    </view>

    <!-- 推荐课程 -->
    <view class="featured-container px-4 mt-4">
      <view class="section-header">
        <view class="section-title">推荐课程</view>
        <view class="more-link" @click="navigateToMore">更多</view>
      </view>
      <view class="featured-grid">
        <view v-for="(course, index) in featuredCourses" :key="index" class="course-card" @click="navigateToCourse(course)">
          <image :src="course.image" mode="aspectFill" class="course-image"/>
          <view class="course-info">
            <text class="course-title">{{ course.title }}</text>
            <view class="course-meta">
              <text class="lesson-count">{{ course.lessonCount }}课时</text>
              <text class="view-count">{{ course.viewCount }}次观看</text>
            </view>
            <view class="price-info">
              <text class="current-price">¥{{ course.currentPrice }}</text>
              <text class="original-price" v-if="course.originalPrice">¥{{ course.originalPrice }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 学习资讯 -->
    <view class="news-container px-4 mt-4 mb-4">
      <view class="section-header">
        <view class="section-title">学习资讯</view>
        <view class="more-link" @click="navigateToNews">更多</view>
      </view>
      <view class="news-list">
        <view v-for="(news, index) in newsList" :key="index" class="news-item" @click="navigateToNewsDetail(news)">
          <image :src="news.image" mode="aspectFill" class="news-image"/>
          <view class="news-content">
            <text class="news-title">{{ news.title }}</text>
            <text class="news-desc">{{ news.description }}</text>
            <view class="news-meta">
              <text class="news-time">{{ news.time }}</text>
              <text class="news-category">{{ news.category }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import PLATFORM from '@/utils/platform'

defineOptions({
  name: 'Home',
})

// 状态定义
const current = ref<number>(0)
const searchText = ref('')
const { safeAreaInsets } = uni.getSystemInfoSync()

// 轮播图数据
const swiperList = ref([
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
])

// 分类标签
const categoryTabs = ref(['全部', '小学', '初中', '高中'])
const currentCategoryTab = ref(0)

// 分类数据
const allCategories = {
  primary: [
    { name: '语文', icon: 'icon-chinese', courseCount: 25 },
    { name: '数学', icon: 'icon-math', courseCount: 30 },
    { name: '英语', icon: 'icon-english', courseCount: 28 },
    { name: '科学', icon: 'icon-physics', courseCount: 15 },
    { name: '道德与法治', icon: 'icon-history', courseCount: 12 },
    { name: '美术', icon: 'icon-geography', courseCount: 10 },
  ],
  junior: [
    { name: '语文', icon: 'icon-chinese', courseCount: 32 },
    { name: '数学', icon: 'icon-math', courseCount: 35 },
    { name: '英语', icon: 'icon-english', courseCount: 30 },
    { name: '物理', icon: 'icon-physics', courseCount: 20 },
    { name: '化学', icon: 'icon-chemistry', courseCount: 18 },
    { name: '生物', icon: 'icon-biology', courseCount: 15 },
    { name: '历史', icon: 'icon-history', courseCount: 16 },
    { name: '地理', icon: 'icon-geography', courseCount: 14 },
  ],
  senior: [
    { name: '语文', icon: 'icon-chinese', courseCount: 38 },
    { name: '数学', icon: 'icon-math', courseCount: 42 },
    { name: '英语', icon: 'icon-english', courseCount: 36 },
    { name: '物理', icon: 'icon-physics', courseCount: 25 },
    { name: '化学', icon: 'icon-chemistry', courseCount: 22 },
    { name: '生物', icon: 'icon-biology', courseCount: 20 },
    { name: '历史', icon: 'icon-history', courseCount: 18 },
    { name: '地理', icon: 'icon-geography', courseCount: 16 },
  ]
}

// 计算当前显示的分类
const currentCategories = computed(() => {
  if (currentCategoryTab.value === 0) {
    return [...allCategories.senior] // 默认显示高中课程
  }
  const categories = [allCategories.primary, allCategories.junior, allCategories.senior]
  return categories[currentCategoryTab.value - 1]
})

// 切换分类标签
const handleTabChange = (index: number) => {
  currentCategoryTab.value = index
}

// 推荐课程数据
const featuredCourses = ref([
  {
    id: 1,
    title: '高中语文必修一',
    image: 'https://via.placeholder.com/300x200',
    lessonCount: 12,
    viewCount: 1000,
    currentPrice: 99,
    originalPrice: 199,
  },
  // ... 更多课程
])

// 学习资讯数据
const newsList = ref([
  {
    id: 1,
    title: '2024高考改革最新动态',
    description: '教育部发布最新高考改革方案，这些变化你需要知道...',
    image: 'https://via.placeholder.com/120x80',
    time: '2024-03-15',
    category: '教育资讯',
  },
  // ... 更多资讯
])

// 事件处理函数
const handleSearch = () => {
  uni.navigateTo({
    url: `/pages/search/index?keyword=${searchText.value}`,
  })
}

const handleSwiperClick = (e: any) => {
  const index = e.currentTarget.dataset.index
  // 处理轮播图点击
}

const handleSwiperChange = (e: any) => {
  current.value = e.current
}

const handleCategoryClick = (category: any) => {
  uni.navigateTo({
    url: `/pages/category/index?name=${category.name}`,
  })
}

const navigateToCourse = (course: any) => {
  uni.navigateTo({
    url: `/pages/course/detail?id=${course.id}`,
  })
}

const navigateToMore = () => {
  uni.navigateTo({
    url: '/pages/course/list',
  })
}

const navigateToNews = () => {
  uni.navigateTo({
    url: '/pages/news/list',
  })
}

const navigateToNewsDetail = (news: any) => {
  uni.navigateTo({
    url: `/pages/news/detail?id=${news.id}`,
  })
}

const handleBack = () => {
  uni.navigateBack()
}

const handleBackHome = () => {
  uni.switchTab({
    url: '/pages/index/index',
  })
}

onMounted(() => {
  // 初始化数据
})
</script>

<style lang="scss">
.custom-navbar {
  background: linear-gradient(to right, #4a90e2, #63b3ed);
  color: #fff;
}

.search-container {
  background-color: #fff;
}

.swiper-container {
  height: 160px;
  .wd-swiper {
    border-radius: 12px;
  }
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  
  .more-link {
    font-size: 14px;
    color: #666;
  }
}

.category-container {
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }

  .category-tabs {
    display: flex;
    gap: 16px;

    .tab-item {
      font-size: 14px;
      color: #666;
      position: relative;
      padding: 4px 0;
      
      &.active {
        color: #4080FF;
        font-weight: 500;
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 12px;
          height: 2px;
          background-color: #4080FF;
          border-radius: 1px;
        }
      }
    }
  }

  .categories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    
    .category-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px;
      background: #F8F9FA;
      border-radius: 12px;
      transition: all 0.3s ease;
      animation: fadeInUp 0.5s ease forwards;
      opacity: 0;
      transform: translateY(20px);
      
      &:hover {
        background: #EDF2FF;
        transform: translateY(-2px);
      }
      
      .category-icon-wrapper {
        width: 48px;
        height: 48px;
        background: #FFFFFF;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        
        .iconfont {
          font-size: 24px;
          color: #4080FF;
        }
      }
      
      .category-name {
        font-size: 14px;
        color: #333;
        margin-bottom: 4px;
        font-weight: 500;
      }
      
      .category-count {
        font-size: 12px;
        color: #999;
      }
    }
  }
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  
  .course-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .course-image {
      width: 100%;
      height: 120px;
    }
    
    .course-info {
      padding: 12px;
      
      .course-title {
        font-size: 14px;
        font-weight: 500;
        color: #333;
        margin-bottom: 8px;
      }
      
      .course-meta {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #666;
        margin-bottom: 8px;
      }
      
      .price-info {
        display: flex;
        align-items: center;
        gap: 8px;
        
        .current-price {
          font-size: 16px;
          font-weight: bold;
          color: #f56c6c;
        }
        
        .original-price {
          font-size: 12px;
          color: #999;
          text-decoration: line-through;
        }
      }
    }
  }
}

.news-list {
  .news-item {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    
    .news-image {
      width: 120px;
      height: 80px;
      border-radius: 4px;
      margin-right: 12px;
    }
    
    .news-content {
      flex: 1;
      
      .news-title {
        font-size: 16px;
        font-weight: 500;
        color: #333;
        margin-bottom: 8px;
      }
      
      .news-desc {
        font-size: 14px;
        color: #666;
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      
      .news-meta {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #999;
      }
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
